<template>
  <div class="container">
    <!--订单信息查询列表-->
    <el-row class="infoSearch">
      <!-- 搜索条件重新布局 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-row class="search-input">
          <el-form-item label="售后单编号：" >
            <el-input v-model="ruleForm.afterSaleNo" placeholder="售后订单编号"></el-input>
          </el-form-item>
          <el-form-item label="售后类型：">
            <el-select v-model="ruleForm.afterSaleType" style="width:160px">
              <el-option v-for="item in afterSaleTypes" :key="item.afterSaleTypes" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="售后单状态：">
            <el-select v-model="ruleForm.status" placeholder="全部" style="width:160px">
              <el-option v-for="item in afterSaleStatus" :key="item.afterSaleStatus" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退款状态：">
            <el-select v-model="ruleForm.sendRefundStatus" placeholder="全部" style="width:160px">
              <el-option v-for="item in sendRefundStatus" :key="item.sendRefundStatus" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退货商品名称：" >
            <el-input v-model="ruleForm.goodsName" placeholder="退货商品名称"></el-input>
          </el-form-item>
          <el-form-item label="退货商品编码：" >
            <el-input v-model="ruleForm.productCode" placeholder="退货商品编码"></el-input>
          </el-form-item>
          <el-form-item label="售后申请时间：" >
            <el-form-item prop="applyTime">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.applyTime" style="width:160px !important"></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="售后完成时间：" >
            <el-form-item prop="afterSalesCompletionTime">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.afterSalesCompletionTime" style="width:160px !important"></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="退货完成时间：" >
            <el-form-item prop="returnGoodsCompletionTime">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.returnGoodsCompletionTime" style="width:160px !important"></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="退货配送商：" >
            <el-input v-model="ruleForm.returnDistributor" placeholder="退货配送商"></el-input>
          </el-form-item>
          <el-form-item label="退货运单号：">
            <el-input v-model="ruleForm.returnNumber" placeholder="退货运单号"></el-input>
          </el-form-item>
          <el-form-item label="订单编号：" prop="sendSourceChannel">
            <el-input v-model="ruleForm.orderNo" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="商户名称：" prop="merchants">
            <el-input v-model="ruleForm.merchants" placeholder="商户名称"></el-input>
          </el-form-item>
          <el-form-item label="商户Code：" prop="merchantsCode">
            <el-input v-model="ruleForm.merchantsCode" placeholder="商户Code"></el-input>
          </el-form-item>
          <el-form-item label="下单人会员号：" prop="memberId">
            <el-input v-model="ruleForm.memberId" placeholder="下单人会员号"></el-input>
          </el-form-item>

          <el-form-item label="来源渠道：" prop="sendActivitySources">
            <el-select v-model="ruleForm.sendActivitySources" placeholder="全部" style="width:160px">
              <el-option v-for="item in sendActivitySources" :key="item.sendActivitySources" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动来源：" prop="activitySources1">
            <el-select v-model="ruleForm.activitySources" placeholder="全部" style="width:160px">
              <!--              <el-option v-for="item in activitySources" :key="item.code" :label="item.name" :value="item.code"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="下单日期：" class="commonDater" style="margin-bottom: 0 !important">
            <el-form-item prop="orderTime">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.orderTime" style="width:160px !important"></el-date-picker>
            </el-form-item>
            <!-- <span>-</span>
            <el-form-item prop="applyTimeEnd">
              <el-date-picker type="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.applyTimeEnd" style="width:220px !important"></el-date-picker>
            </el-form-item> -->
          </el-form-item>
          <el-form-item label="支付方式：" prop="sendPayType">
            <el-select v-model="ruleForm.sendPayType" placeholder="全部" style="width:160px">
              <el-option v-for="item in sendPayType" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发货人：" prop="sentGoodsPerson">
            <el-input v-model="ruleForm.sentGoodsPerson" placeholder="发货人"></el-input>
          </el-form-item>
          <el-form-item label="发货手机号：" prop="sentGoodsPersonPhone">
            <el-input v-model="ruleForm.sentGoodsPersonPhone" placeholder="发货手机号"></el-input>
          </el-form-item>
          <!--发货地址-->
          <el-form-item label="发货地址：" prop="sendProvince">
            <el-select v-model="ruleForm.sendProvince" placeholder="上海" style="width:160px">
              <el-option v-for="item in sendProvince" :key="item.sendProvince" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select v-model="ruleForm.sendCity" placeholder="上海" style="width:160px">
              <el-option v-for="item in sendCity" :key="item.sendCity" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select v-model="ruleForm.sendCounty" placeholder="上海" style="width:160px">
              <el-option v-for="item in sendCounty" :key="item.sendCounty" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button mt15 pdr20">
          <el-form-item>
            <el-button type="primary" size="small" @click="submitForm('ruleForm')">查询</el-button>
            <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>

    <div class="order-tab-container">
      <el-tabs v-model="tabActive" type="card"  @tab-click="handleClick">
        <!-- 待审核 -->
        <el-tab-pane label="全部" name="0"  ></el-tab-pane>
        <!-- 待收货 -->
        <el-tab-pane label="待审核" name="1101" ></el-tab-pane>
        <!-- 待退款 -->
        <el-tab-pane label="审核通过" name="1030" ></el-tab-pane>
        <!-- 售后成功 -->
        <el-tab-pane label="审核不通过" name="1040" ></el-tab-pane>

      </el-tabs>
    </div>

    <!--信息展示列表-->
    <el-row class="infoShow">
      <!--信息展示表单栏-->
      <el-col :span="24">
        <el-table class="toolbar"
                  :header-cell-style="{background:'#2F4554',color:'#FFFFFF'}"
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  stripe>
          <el-table-column prop="merchantName" label="商户名称" width="120"></el-table-column>
          <el-table-column prop="orderNo" label="订单编号" width="120">
            <template slot-scope="scope">
              <router-link
                :to="{path:'/OrderDetail/'+scope.row.orderNo}">
                <el-link type="primary">{{scope.row.orderNo}}</el-link>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="afterSalesOrderNumber" label="售后单编号" width="240"></el-table-column>
          <el-table-column prop="afterSalesType" label="售后类型" width="120"></el-table-column>
          <el-table-column prop="aftersalesOrderStatus" label="售后单状态" width="120"></el-table-column>
          <el-table-column prop="methodOfReturnOfApplication" label="申请寄回方式" width="120"></el-table-column>
          <el-table-column prop="aftersalesApplicationTime" label="售后申请时间" width="230"></el-table-column>
          <el-table-column prop="amountOfRefundRequestedByTheAftersalesOrder" label="售后单申请退款金额" width="120"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间" width="230"></el-table-column>
          <el-table-column prop="completeTime" label="售后完成时间" width="230"></el-table-column>
          <el-table-column prop="actualRefundAmount" label="实际退款金额	" width="120"></el-table-column>
          <el-table-column prop="goodName" label="退款商品	" width="120"></el-table-column>
          <el-table-column prop="memberId" label="下单会员账号	" width="120"></el-table-column>
          <el-table-column prop="restLogisticsCompany" label="退货配送商	" width="120"></el-table-column>
          <el-table-column prop="restLogisticsNo" label="退货运单号	" width="120"></el-table-column>
          <el-table-column prop="receiveLinkman" label="发货人	" width="120"></el-table-column>
          <el-table-column prop="receivePhone" label="发货人手机号	" width="120"></el-table-column>
          <el-table-column prop="receiveDetailAddress" label="发货地址	" width="120"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="check(scope.row)">查看</el-button>
              <!--              <el-button v-if="scope.row.afterSaleType==4&&scope.row.status!=1100" size="mini" @click="exchangeGoods(scope.row)">换货处理</el-button>-->
              <el-button v-if="scope.row.status==1010" size="mini" @click="afterSalesAuditClick(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="total, prev, pager, next, jumper,sizes"
                       @current-change="refreshPageRequest"
                       :current-page="ruleForm.start"
                       :page-size="ruleForm.limit"
                       :total="totalSize"
                       style="float:right;"
                       :page-sizes="[10, 20, 30, 40]"
                       @size-change="handleSizeChange"></el-pagination>
      </el-col>
    </el-row>

    <!-- 修改状态 -->
    <!--    <el-dialog title="换货处理" :visible.sync="dialogFormVisible" width="30%" v-if="dialogFormVisible">-->
    <!--      <el-form :model="updateForm" ref="updateForm">-->
    <!--        <el-form-item label="售后状态：" label-width="120px" prop="status">-->
    <!--          <el-select v-model="updateForm.status" @change="statusChange" placeholder="请选择状态" style="width: 70%">-->
    <!--            <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item v-if="updateForm.status==1100" label="物流公司" label-width="120px" prop="logisticsCompany">-->
    <!--          <el-select v-model="updateForm.logisticsCompany" placeholder="请选择物流公司" style="width: 70%">-->
    <!--            <el-option v-for="item in logisticsCompanyOptions" :key="item.id" :label="item.logisticsCompanyName" :value="item.id"></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item v-if="updateForm.status==1100" label="物流单号" label-width="120px" prop="logisticsNo">-->
    <!--          <el-input v-model="updateForm.logisticsNo" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->

    <!--      <div slot="footer" class="dialog-footer" style="text-align: center">-->
    <!--        <el-button size="small" @click="dialogFormVisible=false">取 消</el-button>-->
    <!--        <el-button size="small" type="primary" @click="doUpdateStatus()">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <!-- 售后审核 -->
    <el-dialog title="售后审核" :visible.sync="afterSalesAuditVisible" width="30%" v-if="afterSalesAuditVisible">
      <el-form :model="afterSalesAuditForm" ref="afterSalesAuditForm">
        <el-form-item label="是否退回商品：" label-width="120px" prop="resource">
          <el-radio-group v-model="afterSalesAuditForm.resource">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="售后单退款金额：" label-width="120px" prop="returnAmount">
          <el-input v-model="afterSalesAuditForm.returnAmount"></el-input>
        </el-form-item>
        <el-form-item label="售后原因：" label-width="120px" prop="applyReason">
          <el-input v-model="afterSalesAuditForm.applyReason"></el-input>
        </el-form-item>
        <el-form-item label="审核结果：" label-width="120px" prop="status">
          <el-radio-group v-model="afterSalesAuditForm.status">
            <el-radio :label="1101">审核通过</el-radio>
            <el-radio :label="1040">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核人备注：" label-width="120px" prop="status">
          <el-input type="remark" v-model="afterSalesAuditForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button size="small" @click="afterSalesAuditVisible=false">取 消</el-button>
        <el-button size="small" type="primary" @click="afterSaleUpdateSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查询店铺商品 -->
    <!--    <el-dialog title="换货商品选择" :visible.sync="dialogProductVisible" width="80%">-->
    <!--      <el-form :inline="true" :model="productFilters" label-width="100px">-->
    <!--        <el-row class="search-input">-->
    <!--          <el-form-item label="商品名称：">-->
    <!--            <el-input v-model="productFilters.chineseName" placeholder="商品名称"/>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="商品编码：">-->
    <!--            <el-input v-model="productFilters.code" placeholder="商品编码"/>-->
    <!--          </el-form-item>-->
    <!--        </el-row>-->
    <!--        <el-form-item>-->
    <!--          <el-button icon="fa fa-search" label="查询" type="primary" @click="findProductPage">查询</el-button>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item>-->
    <!--          <el-button label="重置" type="primary" @click="resetProductFiltersForm('productFilters')">重置</el-button>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->

    <!--      <el-table :data="tableProductData"-->
    <!--                align="align"-->
    <!--                style="width: 100%"-->
    <!--                :max-height="800"-->
    <!--                :stripe="true"-->
    <!--                @selection-change="selectionProductChange"-->
    <!--                :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">-->
    <!--        <el-table-column type="selection" align="center" width="55"></el-table-column>-->
    <!--        <el-table-column prop="storeName" label="店铺" sortable></el-table-column>-->
    <!--        <el-table-column prop="chineseName" label="商品名称" sortable></el-table-column>-->
    <!--        <el-table-column prop="fullNamePath" label="商品类目" sortable></el-table-column>-->
    <!--        <el-table-column prop="brandName" label="商品品牌" sortable></el-table-column>-->
    <!--        <el-table-column prop="code" label="商品编码" sortable></el-table-column>-->
    <!--        <el-table-column label="退货数量" sortable>-->
    <!--          <template slot-scope="scope">-->
    <!--            <el-input width="100px" type="number" v-model="scope.row.returnNumber" placeholder="请输入发货数量"></el-input>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--      </el-table>-->

    <!--      &lt;!&ndash;分页栏&ndash;&gt;-->
    <!--      <div class="toolbar" style="padding:10px;">-->
    <!--        <el-pagination layout="total, prev, pager, next, jumper,sizes"-->
    <!--                       @current-change="refreshPageRequest"-->
    <!--                       @size-change="handleSizeChange"-->
    <!--                       :current-page="pageRequest.pageNum"-->
    <!--                       :page-size="pageRequest.pageSize"-->
    <!--                       :total="totalSize"-->
    <!--                       style="float:right;"-->
    <!--                       :page-sizes="[10, 20, 30, 40]">-->
    <!--        </el-pagination>-->
    <!--      </div>-->

    <!--      <div slot="footer" class="dialog-footer" style="text-align: center">-->
    <!--        <el-button size="small" @click="dialogProductVisible=false">取 消</el-button>-->
    <!--        <el-button size="small" type="primary" @click="saveReturnProduct()">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
  import AfterSalesOrderDetail from '../Pages/orderDetailsPages/AfterSalesOrderDetail'
  import  orderDetailPay from '../Pages/orderDetailsPages/OrderDetail'
  import qs from 'qs'
  const after_sale_types = [
    { name: "全部", code: null },
    { name: "仅退款未发货", code: 1 },
    {
      name: "仅退款已发货",
      code: 2
    },
    { name: "退款退货", code: 3 },
    { name: "换货", code: 4 }
  ];
  //1010:申请退款待处理1020:取消售后1030:审核通过1040:审核拒绝1050:审核后取消售后1060:退款中1070:退款成功
  const after_sale_status = [
    { name: "全部", code: null },
    { name: "申请退款待处理", code: 1010 },
    {
      name: "取消售后",
      code: 1020
    },
    { name: "审核通过", code: 1030 },
    { name: "审核拒绝", code: 1040 },
    { name: "审核后取消售后", code: 1050 },
    {
      name: "退款中",
      code: 1060
    },
    { name: "退款成功", code: 1070 },
    { name: "换货待处理", code: 1080 },
    { name: "换货已收货", code: 1090 },
    { name: "换货已发货", code: 1100 },
    { name: "审核通过", code: 1101 }
  ];
  const send_back_status = [
    { name: "全部", code: null },
    { name: "待寄回", code: 1 },
    { name: "已寄回", code: 2 }
  ];
  const send_back_types = [
    { name: "全部", code: null },
    { name: "上门取件", code: 1 },
    { name: "快递寄回", code: 2 }
  ];
  export default {
    components: {
      AfterSalesOrderDetail,
      orderDetailPay
    },

    data() {
      return {
        afterSalesAuditForm:{
          resource:1,
          status:1101,
          id:''
        },
        afterData:{},
        goodsData:{},
        compensationRefundAmount:{},
        aftersalesOrderRefundAmountOfGoldPowder:'',
        refundAmountOfAftersalesOrder:{},
        val_data:'',
        goodsDatal:'',
        auditResult:'',
        remarks:'',
        refundStatus:'',
        tabActive:'',
        orderNo:'',
        goodsId:'',
        afterSaleNo:'',
        selectionProduct: [],                                     // 选中的商品
        productFilters: {
          chineseName: '',
          code: ''
        },                     // 商品列表条件查询
        pageRequest: {pageNum: 1, pageSize: 10},
        totalSize: 0,
        tableProductData: [],                                     // 商品数据
        dialogProductVisible: false,                              // 店铺商品
        logisticsCompanyOptions: [],
        orderStatusOptions: [{value: '1080', label: '换货待处理'}, {value: '1090', label: '换货已收货'}, {value: '1100', label: '换货已发货'}],
        dialogVisible: false,
        dialogFormVisible: false,
        afterSalesAuditVisible: false,
        afterSaleTypes: [
          {name: '全部', code: null},
          {name: '仅退款未发货', code: 1},
          {name: '仅退款已发货', code: 2},
          {name: '退款退货', code: 3},
          {name: '换货', code: 4}],
        afterSaleStatus: [
          {name: '全部', code: null},
          {name: '申请退款待处理', code: 1010},
          {name: '取消售后', code: 1020},
          {name: '审核通过', code: 1030},
          {name: '审核拒绝', code: 1040},
          {name: '审核后取消售后', code: 1050},
          {name: '退款中', code: 1060},
          {name: '退款成功', code: 1070},
          {name: '换货待处理', code: 1080},
          {name: '换货已收货', code: 1090},
          {name: '换货已发货', code: 1100}],// 1010:申请退款待处理1020:取消售后1030:审核通过1040:审核拒绝1050:审核后取消售后1060:退款中1070:退款成功],
        sendBackStatus: [{name: '全部', code: null}, {name: '待寄回', code: 1}, {name: '已寄回', code: 2}],
        sendBackTypes: [{name: '全部', code: null}, {name: '上门取件', code: 1}, {name: '快递寄回', code: 2}],
        sendRefundStatus: [{name: '全部', code: null}, {name: '待退款', code: 1}, {name: '退款中', code: 2}, {name: '已退款', code: 2}],
        sendSourceChannel: [{name: '全部', code: null}, {name: 'APP', code: 1}, {name: '商城小程序', code: 2}, {name: '企业微信', code: 3}, {name: 'We2000公众号', code: 4}, {name: '商城公众号', code: 5}, {name: '其他', code: 6}],
        sendActivitySources: [
          {name: '全部', code: null},
          {name: '拼团', code: 1},
          {name: '秒杀', code: 2},
          {name: '预售', code: 3},
          {name: '抽奖', code: 4}
        ],
        sendPayType: [{name: '全部', code: null}, {name: '微众分期', code: 1}, {name: 'We2000', code: 2}, {name: '微信', code: 3}, {name: '微众银行储蓄卡', code: 4}],
        sendProvince: [{name: '上海', code: null}],
        sendCity: [{name: '上海', code: null}],
        sendCounty: [{name: '上海', code: null}],
        ruleForm: {
          afterSaleNo:'',
          afterSaleType:'',
          status:'',
          sendRefundStatus:'',
          goodsName:'',
          productCode:'',
          applyTime:'',
          afterSalesCompletionTime:'',
          returnGoodsCompletionTime:'',
          returnDistributor:'',
          returnNumber:'',
          orderNo:'',
          merchants:'',
          merchantsCode:'',
          memberId:'',
          sendActivitySources:'',
          activitySources:'',
          orderTime:'',
          sendPayType:'',
          sentGoodsPerson:'',
          sentGoodsPersonPhone:'',
          sendProvince:'',
          sendCity:'',
          sendCounty:'',
          limit: 10,
          start: 1
        },
        rules: {
          afterSalesOrderNumber: [
            {required: false, message: '请输入售后订单编号', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          nameOfTheSalesStore: [
            {required: false, message: '请输入销售店铺名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          orderCode: [
            {required: false, message: '请输入订单编号', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          returnTheLogisticsOrderNumber: [
            {required: false, message: '请输入退回物流单号', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          orderMemberAccountNumber: [
            {required: false, message: '请输入下单会员账号', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          region1: [
            {required: false, message: '请选择寄回状态', trigger: 'change'}
          ],
          region2: [
            {required: false, message: '请选择退货配送商', trigger: 'change'}
          ],
          region3: [
            {required: false, message: '请选择售后类型', trigger: 'change'}
          ],
          region4: [
            {required: false, message: '请选择售后单状态', trigger: 'change'}
          ],
          region5: [
            {required: false, message: '请选择申请寄回方式', trigger: 'change'}
          ],
          region6: [
            {required: false, message: '请选择销售商家', trigger: 'change'}
          ]
        },
        tableData: [],
        merchantTableData: [],
        saleApplyData: {},
        updateForm: {
          id: '',
          logisticsCompany: '',
          logisticsNo: '',
          status: '',
          orderNo: '',
          afterSaleNo: ''
        }
      }
    },

    created() {
      //获取商家列表
      let this_ = this
      this.utils.request.queryMerchantListOther({}, function(res) {
        if (res.code == '0000') {
          this_.merchantTableData = res.data
          this_.merchantTableDataTatol = res.totle
        }
      })
      this.submitForm('ruleForm')
    },

    mounted() {
      this.queryOrderLogisticsCompanyList();
      this.findProductPage();
    },

    methods: {
      handleClick(tab, event) {
        this.ruleForm.status=tab.name;
        this.submitForm();
      },
      afterSalesAuditClick(rows){
        this.afterSalesAuditForm.returnAmount = rows.returnRealAmount;
        this.afterSalesAuditForm.id=rows.id;
        this.afterSalesAuditVisible =true;
      },
      // 确认发货商品
      saveReturnProduct: function() {
        if (this.selectionProduct.length == 0) {
          return this.$message({message: '请勾选要发货的商品', type: 'error'})
        } else {
          let flag = true
          this.selectionProduct.forEach(item => {
            if (!item.returnNumber) {
              flag = false
            }
          })
          if (flag) {
            this.dialogProductVisible = false
            this.$message({message: '操作成功', type: 'success'})
          } else {
            return this.$message({message: '请输入勾选商品的退货数量', type: 'error'})
          }
        }
      },

      // 获取分页数据
      findProductPage: function(params) {
        let this_ = this
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          }
        }
        if (this_.productFilters == undefined || this_.productFilters == null) {
          this_.productFilters = {}
        }
        this_.productFilters.start = params.pageNum
        this_.productFilters.limit = params.pageSize
        this.utils.request.queryShopProductPage(this_.productFilters, function(
          res
        ) {
          this_.tableProductData = res.data.rows
          this_.totalSize = Number(res.data.total)
        })
      },

      // 商品列表条件 重置
      resetProductFiltersForm(formName) {
        this.productFilters = {
          chineseName: '',
          code: ''
        }
        this.findProductPage()
      },

      // 商品列表勾选数据
      selectionProductChange: function(params) {
        this.selectionProduct = params
      },

      // 售后状态选择
      statusChange: function(param) {
        if (param == 1100) {
          this.dialogProductVisible = true
          this.selectionProduct = []
        } else {
          this.dialogProductVisible = false
        }
      },

      // 物流公司初始化
      queryOrderLogisticsCompanyList: function() {
        let this_ = this
        this_.utils.request.queryOrderLogisticsCompanyList({}, function(res) {
          if (res.code == '0000') {
            this_.logisticsCompanyOptions = res.data
          }
        })
      },

      // 换货
      exchangeGoods: function(row) {
        this.dialogFormVisible = true
        this.updateForm = {
          id: row.id,
          logisticsCompany:
            row.logisticsCompany == 0 ? '' : row.logisticsCompany.toString(),
          logisticsNo: row.logisticsNo,
          status: row.status.toString(),
          orderNo: row.orderNo,
          afterSaleNo: row.afterSaleNo
        }
      },
      submitForm(formName) {
        let this_ = this
        this.utils.request.queryPageOrderAfterSaleApplyList(
          this.ruleForm,
          function(res1) {
            if (res1.code == '0000') {
              this_.totalSize = parseInt(res1.data.total)
              this_.tableData = res1.data.rows.map(item => {
                let applyStatus = after_sale_status.find(function(
                  statusItem,
                  index
                ) {
                  return statusItem.code == item.status
                })
                let saleType = after_sale_types.find(function(
                  saleTypeItem,
                  index
                ) {
                  return saleTypeItem.code == item.afterSaleType
                })
                let sendBack = send_back_types.find(function(
                  sendBackItem,
                  index
                ) {
                  return sendBackItem.code == item.sendBackType
                })
                let sendBackStatus = send_back_status.find(function(
                  sendBackStatusItem,
                  index
                ) {
                  return sendBackStatusItem.code == item.sendBackStatus
                })
                let merchant = this_.merchantTableData.find(function(
                  merchantItem,
                  index
                ) {
                  return merchantItem.id == item.merchantId
                })
                let applyData = item
                applyData.afterSalesOrderNumber = item.afterSaleNo
                applyData.afterSalesType =
                  typeof saleType == 'undefined' ? '' : saleType.name
                applyData.aftersalesOrderStatus = applyStatus.name
                applyData.methodOfReturnOfApplication =
                  typeof sendBack == 'undefined' ? '' : sendBack.name
                applyData.aftersalesApplicationTime = item.applyTime
                applyData.amountOfRefundRequestedByTheAftersalesOrder =
                  item.returnRealAmount
                applyData.auditTime = item.auditTime
                applyData.returnGoodsOrnot =
                  item.afterSaleType == 3 ? '是' : '否'
                applyData.methodOfReturnOfApplication =
                  item.afterSaleType == 3 ? '快递寄回' : ''
                applyData.returnStatus =
                  item.afterSaleType == 3 && item.status == 1070 ? '是' : ''
                applyData.completeTime = item.applyTime
                applyData.actualRefundAmount = item.returnRealAmount
                applyData.orderCode = item.orderNo
                applyData.saleWays = 'BBC'
                applyData.orderMemberAccountNumber = item.memberId
                applyData.sellers = item.merchantName
                applyData.sellersName = item.storeName
                return applyData
              })
            }
          }
        )
      },
      download() {
        window.location.href =
          'http://localhost:8087/jic-order/orderAfterSaleApply/download?' +
          qs.stringify(this.ruleForm)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      check: function(row) {
        //跳转售后单详情页面
        this.$router.push({
          path: '/AftersaleOrderDetail/' + row.afterSaleNo
        })
      },
      updateStatus: function(val) {
        this.dialogFormVisible = true
        this.updateForm.afterSaleNo = val.afterSaleNo
        this.updateForm.orderNo = val.orderCode
        this.updateForm.id = val.id
        this.updateForm.status = 1070 //已完成和已退款对应的售后单状态都是1070
      },
      doUpdateStatus: function() {
        let this_ = this
        let param = Object.assign({}, this_.updateForm)
        let orderReturnGoodRecordRequestList = new Array()
        this.selectionProduct.forEach(item => {
          let obj = {}
          obj.afterSaleNo = this_.updateForm.afterSaleNo
          obj.goodsId = item.id
          obj.goodsNum = item.returnNumber
          orderReturnGoodRecordRequestList.push(obj)
        })
        param.orderReturnGoodRecordRequestList = orderReturnGoodRecordRequestList
        this.utils.request.exchangeGoods(param, function(res) {
          if (res.code == '0000') {
            this_.dialogFormVisible = false
            this_.$message({message: '操作成功', type: 'success'})
            this_.submitForm()
          } else {
            this_.$message({message: '操作失败' + res.msg, type: 'error'})
            this_.dialogFormVisible = true
          }
        })
      },
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields()
        }
      },

      // 换页刷新
      refreshPageRequest: function(pageNum) {
        this.ruleForm.start = pageNum
        this.submitForm()
      },
      handleSizeChange: function(pageSize) {
        this.ruleForm.limit = pageSize
        this.ruleForm.start = 1
        this.submitForm()
      },
      // 售后提交修改
      afterSaleUpdateSubmit() {
        let this_ = this
        this_.utils.request.orderAfterSaleApplyUpdate(this.afterSalesAuditForm, function (res) {
          if (res.code == '0000') {
            this_.$message({message: '操作成功', type: 'success'})
            this_.afterSalesAuditVisible =false;
            this_.submitForm()
          } else {
            this_.$message({message: '操作失败,' + res.msg, type: 'error'})
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  /* 搜索部分样式重构 */
  .infoSearch /deep/ .el-form-item {
    display: inline-block;
    // margin: 0 20px 15px 0 !important;
    height: 32px;
    line-height: 32px;
    .el-input {
      width: 160px !important;
      height: 32px;
      line-height: 32px;
      .el-input__inner {
        height: 32px;
        line-height: 32px;
      }
    }
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }
    .el-form-item__content {
      height: 32px;
      line-height: 32px;
    }
    .el-select {
      height: 32px;
      line-height: 32px;
    }
  }

  .special /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }

  .infoSearch .commonDater /deep/ .el-form-item {
    margin-right: 0 !important;
  }

  .el-input {
    width: 295px !important;
  }

  .el-date-editor {
    width: 120px !important;
  }

  .mt15{
    margin-top: 15px;
  }

  .ml22{
    margin-left: 22px;
  }

  .pdr20{
    padding-right: 20px;
  }
</style>
